<template>
  <div class="my_box">
    <!-- 个人信息 -->
    <div class="information">
      <div class="information1">
        <img
          :src="user.logo == '' ? '/static/images/avatar.png' : user.logo"
          alt=""
        />
        <div>
          <span>{{ user.name }}</span>
          <span>状态: {{ user.work_status == 0 ? "下班" : "上班" }}</span>
        </div>
      </div>
      <div class="edit" @click="Editinformation">编辑资料</div>
    </div>

    <!-- 我的工单 -->
    <div class="myWorkorder">
      <div class="myWorkorder_title">
        <span> 我的工单 </span>
        <span @click="ToMylist"> 更多 >> </span>
      </div>
      <div v-if="myWorkList.length > 0">
        <div class="myWorkorder_details" v-for="(item, index) in myWorkList" :key="index">
          <div class="myWorkorder1">
            <img :src="item.status == 5 ? '/static/images/yes.png' : '/static/images/no.png'" alt="" />
            <div>
              <span>{{item.title}}</span>
              <span>单号：{{item.number}}</span>
            </div>
          </div>
          <div class="time">{{item.add_time}}</div>
        </div>
      </div>
      <div class="tishi" v-else>暂无工单</div>
    </div>

    <!-- 功能页 -->
    <div class="function">
      <div class="function_Yue" @click="function_Yue">
        <span> 当前余额 </span>
        <span> ￥{{ user.balance }} <i>></i> </span>
      </div>
      <div class="function_Yue" @click="ToSystem">
        <span> 系统信息 </span>
        <span>
          <i>></i>
        </span>
      </div>
      <div class="function_Yue" @click="ToFeedback">
        <span> 意见反馈 </span>
        <span>
          <i>></i>
        </span>
      </div>
      <div class="function_Yue">
        <span> 联系平台 </span>
        <span class="cool" @tap="makePhoneCall()"> 400-8888-8888 </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      user: "",
      myWorkList: []
    };
  },
  onShow() {
    // pages/my/main
    let mobile =  wx.getStorageSync("mobile")
    this.request({
      url: this.baseUrl + '/api/edit/waterUser',
      data:{
        type: 1,
        mobile: mobile
      },
      method: 'POST',
    })
    .then(result=>{
			// console.log(result)
			if(result.status == 200){
        this.user = result.data.user_login
        this.request({
          url: this.baseUrl + '/api/wechatapp/myWorkList',
          data:{
            water_user_id: this.user.id
          },
          method: 'GET',
        })
        .then(result=>{
          // console.log(result.data)
          if(result.status == 200){
            this.myWorkList = result.data.list.data
            if(this.myWorkList.length > 2){
              this.myWorkList.length = 2
            }
            // console.log(this.myWorkList)
          } else {
            return false
          }
        })
			} else {
        return false
			}
    })

    // /api/wechatapp/myWorkList
    
    // this.user = wx.getStorageSync("userInfo")
    // console.log(this.user)
  },
  computed: {},
  created() {
  },
  mounted() {},
  watch: {},
  methods: {
    // 跳转编辑页面
    Editinformation() {
      wx.navigateTo({
        url: "../edit/main",
      });
    },
    // 跳转我的工单页面
    ToMylist() {
      wx.navigateTo({
        url: "../mylist/main",
      });
    },
    // 跳转余额
    function_Yue() {
      wx.navigateTo({
        url: "../balance/main",
      });
    },
    // 跳转系统提示页面
    ToSystem() {
      wx.navigateTo({
        url: "../system/main",
      });
    },
    // 跳转意见反馈页面
    ToFeedback() {
      wx.navigateTo({
        url: "../feedback/main",
      });
    },
    makePhoneCall(){
      wx.makePhoneCall({
        phoneNumber: '400-8888-8888',
        success:function(){
          console.log('拨打成功')
        },
        fail:function(){
          console.log('拨打失败')
        }
      })
    },
  },
  components: {},
};
</script>

<style scoped >
.information {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40rpx 20rpx;
  background: #1677ff;
  color: #ffffff;
}
.information img {
  width: 120rpx;
  height: 120rpx;
  background: #fff;
  border-radius: 50%;
  margin-right: 20rpx;
}
.information1 {
  display: flex;
  align-items: center;
}
.information1 > div {
  display: flex;
  flex-direction: column;
}
.information1 > div > span:nth-child(2) {
  font-size: 20rpx;
  margin-top: 20rpx;
}
.edit {
  padding: 10rpx 20rpx;
  border: 1rpx solid #ffffff;
  border-radius: 30rpx;
  font-size: 20rpx;
}
.myWorkorder {
  background: #ffffff;
  padding: 30rpx 20rpx 30rpx 20rpx;
  margin-bottom: 15rpx;
}
.myWorkorder_title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.myWorkorder_title > span:nth-child(2) {
  color: #999999;
  font-size: 20rpx;
}

.myWorkorder1 {
  display: flex;
  align-items: center;
  padding-top: 30rpx;
}
.myWorkorder1 > div {
  display: flex;
  flex-direction: column;
}
.myWorkorder1 > div > span:nth-child(2) {
  font-size: 22rpx;
  color: #999999;
  margin-top: 10rpx;
}
.myWorkorder1 img {
  width: 70rpx;
  height: 70rpx;
  background: #eee;
  border-radius: 50%;
  margin-right: 20rpx;
}
.myWorkorder_details {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.time {
  font-size: 22rpx;
  color: #999999;
}
.function {
  padding: 0 20rpx;
  background: #ffffff;
}
.function_Yue {
  display: flex;
  justify-content: space-between;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}
.function_Yue > span:nth-child(2) {
  color: #ff3b30;
  display: flex;
}
.function_Yue > span:nth-child(2) i {
  color: #999999;
  margin-left: 10rpx;
}
.function_Yue > span:nth-child(2).cool {
  color: #1677ff;
}
</style>
